(function () {
  //获取元素
  //menu
  let menuUl = document.querySelector("#menuUl");
  //menu-box
  let menuBox = document.querySelector("#menuBox");
  //banner nav box
  let bannerNav = document.querySelector("#banner-nav");
  console.log(bannerNav);

  //展示box
  menuUl.addEventListener(
    "mouseover",
    function (e) {
      if (e.target.tagName.toLowerCase() == "li") {
        let tag = e.target.getAttribute("data-t");
        let target = document.querySelector(`.menus-box .menu[data-t=${tag}]`);
        //修改menu样式
        for (let i = 0; i < menuUl.children.length; i++) {
          menuUl.children[i].className =
            menuUl.children[i].getAttribute("data-t");
        }
        e.target.className += " current";
        //修改menubox样式
        for (let i = 0; i < menuBox.children.length; i++) {
          menuBox.children[i].className = "menu";
        }
        target.className = "menu current";
      }
    },
    false
  );

  //隐藏box
  bannerNav.addEventListener(
    "mouseleave",
    function () {
      //menuBox消失
      for (let i = 0; i < menuBox.children.length; i++) {
        menuBox.children[i].className = "menu";
      }
      //取消menu current
      for (let i = 0; i < menuUl.children.length; i++) {
        menuUl.children[i].className =
          menuUl.children[i].getAttribute("data-t");
      }
    },
    false
  );
})();
